<script lang="ts" setup>
import { ArrowLeft } from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'

const router = useRouter()

const loginOut = () => {
  router.push("/login")
}

const onBack = () => {
  router.push("/visualization")
  console.log("wwwwww");

}
</script>

<template>
  <el-page-header :icon="ArrowLeft"  class="custom-header"  @back="onBack">
    <template #content>
      <span class="text-large font-600 mr-3"> 隧道施工地质灾害诊断系统后台管理 </span>
    </template>
    <template #extra>
      <div class="header-right">
        <div class="flex items-center">
          <el-avatar
            :size="32"
            class="mr-3"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </div>
        <div class="loginOut">
          <el-button type="primary" link @click="loginOut">退出登录</el-button>
        </div>
      </div>
    </template>
  </el-page-header>
</template>

<style scoped>
.custom-header {
  /* background-color: blueviolet; */
  width: 100%;
}
.header-right {
  /* background-color: aqua; */
  display: flex;
}

.loginOut {
  margin-left: 5px;
  padding-top: 5px;
}
</style>


